<template>
  <div class="page33" v-loading="loading">
    <div class="page-title">收入环比分析—总体情况</div>
    <div class="tableBox" style="margin-top: 20px">
      <el-table
        border
        stripe
        :data="tableData"
        style="width: 100%"
        class="tableTh28"
        ref="table"
        :span-method="spanMethod"
      >
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          :label="item.label"
          :prop="item.prop"
          align="center"
        ></el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { mergeSpan } from "@/utils/mixin.js";
import { $budgetAPI } from "@/api";
export default {
  props: {
    form: {
      type: Object,
      default: () => ({})
    }
  },  
  data(){
    return {
      loading: false,
      tableData: [],
      columns: [],
      spanArr: []
    }
  },
  created(){
    
  },
  methods: {
    getData(){
      this.loading = true;
      $budgetAPI.getCountyOperationPage33(
        { token: this.form.token, areaId: this.form.areaId, acctMonth: this.form.month },
        res => {
          if(res.code == 0){
            const { data, key, name } = res.content;
            name.unshift(name[0]);

            this.columns = key.map((it, i) => {
              return {
                prop: it,
                label: name[i]
              }
            })

            this.tableData = data;
            this.spanArr = mergeSpan(this.tableData, ["parent_index_name", "index_name"]);
          }
          this.loading = false;
        },
        err => {
          console.log(err);
          this.loading = false;
        }
      )
    },
    spanMethod({ rowIndex, columnIndex }){
      if (columnIndex <= 1) {
        return this.spanArr[rowIndex][columnIndex];
      }
    }
  },
}
</script>
<style lang="scss" scoped>
.page33 {
  padding: 20px;
  border: 1px solid #dee5f3;
  border-radius: 5px;
  margin-top: 20px;
  .page-title {
    text-align: center;
    font-size: 20px;
    font-weight: 900;
  }
}
.tableBox {
  margin-right: 10px;
  border-top: 1px solid #9abcf1;
  border-left: 1px solid #bfbfbf;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  /deep/ .el-table.tableTh28 {
    .cell {
      padding: 0 !important;
      // transform: scale(0.9);
      // zoom: 0.9;
      // line-height: normal !important;
      // font-size: 10px;
    }
    th {
      height: 23px;
      padding: 0;
      .cell {
        line-height: 20px;
        height: 20px;
      }
    }

    /deep/ tr.el-table__row td {
      padding: 0 !important;
    }
  }
  /deep/ .tableTh28 .el-table__header {
    .first-title.is-leaf {
      position: relative;
      border-right: 1px solid #d7e5fb !important;
      .cell {
        color: #d7e5fb;
      }
    }

    .second-title.is-leaf {
      position: relative;
      border-right: 1px solid #d7e5fb !important;
      .cell {
        color: #d7e5fb;
      }
    }
    .third-title.is-leaf {
      overflow: visible;
      .cell {
        width: 300%;
        left: -150%;
      }
    }
  }
  /deep/ .el-table tr:last-child td {
    color: #333;
    text-align: center;
    border-bottom: 1px solid transparent !important;
    border-right: 1px solid #bfbfbf !important;
  }
}
</style>